<template>
  <el-card class="form-container" shadow="never">
    <el-form
      :model="content"
      ref="contentFrom"
      label-width="150px">
      <el-form-item
        label="学院封面："
        prop="collegeImage"
        :rules="[
          { required: true, message: '请上传封面', trigger: 'change' }
        ]">
        <single-upload v-model="content.collegeImage"></single-upload>
      </el-form-item>
      <el-form-item
        label="学院简介："
        prop="collegeDesc"
        v-model="content.collegeDesc">
        <div ref="editor" class="editor-wrapper"></div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('contentFrom')">提交</el-button>
        <el-button @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import SingleUpload from '@/components/Upload/singleUpload'
import { collegeInfoSave } from '@/api/college'
import WEditor from 'wangeditor'

const defaultContent = {
  'collegeDesc': '',
  'collegeImage': '',
  'collegeName': '',
  'createTime': '',
  'endTime': '',
  'id': 0,
  'startTime': '',
  'status': '',
  'updateTime': ''
}

export default {
  name: 'MenuDetail',
  components: { SingleUpload },
  data () {
    return {
      content: Object.assign({}, defaultContent),
      isEdit: false

    }
  },
  mounted () {
    this.isEdit = this.$route.query.isEdit
    if (this.isEdit) {

    } else {
      this.initEditor('')
    }
    this.getList()
  },
  methods: {
    initEditor (content) {
      this.editor = new WEditor(this.$refs.editor)
      // this.editor.customConfig.debug = true
      this.editor.customConfig.uploadImgServer = '/zdmanage/upload'
      this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
      this.editor.customConfig.customAlert = function (info) {
        // message.error(info)
      }
      this.editor.customConfig.uploadFileName = 'file'
      this.editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result) {
          if (!result.data) {
            // message.error(result.resultMessage)
          } else {
            insertImg(result.data)
          }
        }
      }
      this.editor.customConfig.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        // 'link', // 插入链接
        // 'list', // 列表
        'justify', // 对齐方式
        // 'quote', // 引用
        // 'emoticon', // 表情
        'image', // 插入图片
        // 'table', // 表格
        // 'video', // 插入视频
        // 'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
      ]
      // this.editor.customConfig.onchange = (html) => {
      //   this.editorContent = html
      //   this.$emit('change', this.editorContent)
      // }
      this.editor.create()
      this.editor.txt.html(content)
    },
    onSubmit (contentFrom) {
      this.$refs['contentFrom'].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            collegeInfoSave(this.content).then(response => {
              this.$refs['contentFrom'].resetFields()
              this.resetForm('contentFrom')
              this.$message({
                message: '提交成功',
                type: 'success',
                duration: 1000
              })
              this.$router.back()
            })
          })
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    },
    resetForm (contentFrom) {
      this.$refs[contentFrom].resetFields()
      this.content = Object.assign({}, defaultContent)
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
  .form-container{
    position: relative;
    z-index: 0;
    width: 800px;
  }
</style>
